<script setup>
import Codemirror from 'codemirror-editor-vue3';
import {javascript} from '@codemirror/lang-javascript'
import {sql} from '@codemirror/lang-sql'
import {json} from '@codemirror/lang-json';  // 引入 JSON 语言支持

// 编辑器代码格式
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/http/http.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/django/django.js';
import 'codemirror/mode/diff/diff.js';
import 'codemirror/mode/go/go.js';
import 'codemirror/mode/jsx/jsx.js';
import 'codemirror/mode/nginx/nginx.js';
// 自动刷新
import 'codemirror/addon/display/autorefresh';
import 'codemirror/addon/comment/comment';
import 'codemirror/addon/tern/tern';
// 主题
import 'codemirror/theme/dracula.css';
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/solarized.css'
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import {autocompletion, completeFromList, closeBrackets} from '@codemirror/autocomplete';
import utils from "@/utils/storage";

const emits = defineEmits(['save'])
const code = ref('')
const codeMirror = ref('')
const props = defineProps({
  data: {
    type: String,
    default: ''
  },
  readOnly: {
    type: Boolean,
    default: true
  },
  mode: {
    type: String,
    default: 'application/json'
  }
})
watch(() => props.data, () => {
  code.value = props.data
}, {immediate: true, deep: true})
const options = ref({
  autorefresh: true, // 是否自动刷新
  lineWrapping: true, // 是否自动刷新
  smartIndent: false, // 自动缩进
  tabSize: 0, // 缩进单元格为 4 个空格
  mode: props.mode, //编辑器的编程语言，比如：'javascript'
  theme: 'idea', // 主题，使用主体需要引入相应的 css 文件
  line: true, // 是否显示行数
  viewportMargin: Infinity, // 高度自适应
  highlightDifferences: true,
  autofocus: false,
  indentUnit: 4,
  readOnly: props.readOnly, // 只读
  showCursorWhenSelecting: true,
  firstLineNumber: 1,
  matchBrackets: true,//括号匹配,
  extensions: [
    javascript(),
    sql(),
    json(),
    closeBrackets(),  // 自动补全括号
    autocompletion({
      override: [
        completeFromList(['console.log', 'document.querySelector', 'alert'])  // 示例补全项
      ]
    })
  ],
  extraKeys: {
    ['Ctrl']: 'autocomplete'
  }
})

function watchEvent(event) {
  console.log(event)
  // 检查是否按下了 Ctrl + S
  if (event.ctrlKey && event.key === 's') {
    emits('save',code.value)
    event.preventDefault(); // 阻止默认的保存行为
    // 你可以在这里添加自定义的保存逻辑
  }
}

onBeforeUnmount(() => {
  document.removeEventListener('keydown', watchEvent);
})
onMounted(() => {
  document.addEventListener('keydown', watchEvent);
})

</script>

<template>
  <div>
    <div class="btn">
      <el-button @click="utils.copyText(code)" type="success" size="small">copy</el-button>
      <el-button @click="emits('save',code)" size="small" type="primary">保存</el-button>
    </div>
    <codemirror ref="codeMirror" v-model:value="code" :options="options"/>
  </div>

</template>

<style scoped lang="scss">
.codemirror-container {
  height: 100%;
  text-align: left;
}
</style>
<style>
.CodeMirror-code {
  line-height: 26px;
  font-size: 15px;
}
</style>